<template>
  <div class="dashboard">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <div class="header-title">
            <h1>🎯 管理后台</h1>
            <p>系统数据概览与管理控制台</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button
            type="primary"
            :icon="Refresh"
            :loading="loading"
            @click="handleRefresh"
            size="default"
          >
            刷新数据
          </el-button>
        </div>
      </div>
    </div>

    <!-- 核心统计卡片 -->
    <div class="stats-section">
      <div class="section-header">
        <h2 class="section-title">📊 系统概览</h2>
        <div class="section-description">核心数据指标一览</div>
      </div>

      <el-row :gutter="24" class="stats-row">
        <el-col :xs="12" :sm="6" :md="6" :lg="6">
          <div class="stat-card users-card">
            <div class="card-inner">
              <div class="stat-icon">
                <el-icon><UserFilled /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ stats.totalUsers || 0 }}</div>
                <div class="stat-label">总用户数</div>
              </div>
              <div class="stat-trend">
                <el-icon class="trend-icon"><CaretTop /></el-icon>
                <span class="trend-text">+12%</span>
              </div>
            </div>
            <div class="card-bg">
              <div class="bg-pattern"></div>
            </div>
          </div>
        </el-col>

        <el-col :xs="12" :sm="6" :md="6" :lg="6">
          <div class="stat-card posts-card">
            <div class="card-inner">
              <div class="stat-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ stats.totalPosts || 0 }}</div>
                <div class="stat-label">总帖子数</div>
              </div>
              <div class="stat-trend">
                <el-icon class="trend-icon"><CaretTop /></el-icon>
                <span class="trend-text">+8%</span>
              </div>
            </div>
            <div class="card-bg">
              <div class="bg-pattern"></div>
            </div>
          </div>
        </el-col>

        <el-col :xs="12" :sm="6" :md="6" :lg="6">
          <div class="stat-card comments-card">
            <div class="card-inner">
              <div class="stat-icon">
                <el-icon><ChatDotRound /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ stats.totalComments || 0 }}</div>
                <div class="stat-label">总评论数</div>
              </div>
              <div class="stat-trend">
                <el-icon class="trend-icon"><CaretTop /></el-icon>
                <span class="trend-text">+15%</span>
              </div>
            </div>
            <div class="card-bg">
              <div class="bg-pattern"></div>
            </div>
          </div>
        </el-col>

        <el-col :xs="12" :sm="6" :md="6" :lg="6">
          <div
            class="stat-card reports-card"
            :class="{ 'has-alert': reportStats.pendingReports > 0 }"
          >
            <div class="card-inner">
              <div class="stat-icon">
                <el-icon><Flag /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ reportStats.pendingReports || 0 }}</div>
                <div class="stat-label">待处理举报</div>
              </div>
              <div class="stat-trend" v-if="reportStats.pendingReports > 0">
                <el-icon class="trend-icon alert"><WarnTriangleFilled /></el-icon>
                <span class="trend-text alert">需要处理</span>
              </div>
              <div v-if="reportStats.pendingReports > 0" class="alert-indicator">
                <div class="alert-dot"></div>
              </div>
            </div>
            <div class="card-bg">
              <div class="bg-pattern"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 今日数据统计 -->
    <div class="today-section">
      <div class="section-header">
        <h2 class="section-title">📅 今日数据</h2>
        <div class="section-description">今日新增数据统计</div>
      </div>

      <el-row :gutter="24" class="today-row">
        <el-col :xs="12" :sm="6" :md="6" :lg="6">
          <div class="today-card posts-today">
            <div class="today-header">
              <div class="today-icon">
                <el-icon><EditPen /></el-icon>
              </div>
              <div class="today-info">
                <span class="today-label">新增帖子</span>
                <div class="today-number">{{ stats.todayPosts || 0 }}</div>
              </div>
            </div>
            <div class="today-trend positive">
              <el-icon><CaretTop /></el-icon>
              <span>+12%</span>
            </div>
          </div>
        </el-col>

        <el-col :xs="12" :sm="6" :md="6" :lg="6">
          <div class="today-card comments-today">
            <div class="today-header">
              <div class="today-icon">
                <el-icon><ChatLineRound /></el-icon>
              </div>
              <div class="today-info">
                <span class="today-label">新增评论</span>
                <div class="today-number">{{ stats.todayComments || 0 }}</div>
              </div>
            </div>
            <div class="today-trend positive">
              <el-icon><CaretTop /></el-icon>
              <span>+8%</span>
            </div>
          </div>
        </el-col>

        <el-col :xs="12" :sm="6" :md="6" :lg="6">
          <div class="today-card whispers-today">
            <div class="today-header">
              <div class="today-icon">
                <el-icon><MessageBox /></el-icon>
              </div>
              <div class="today-info">
                <span class="today-label">新增悄悄话</span>
                <div class="today-number">{{ stats.todayWhispers || 0 }}</div>
              </div>
            </div>
            <div class="today-trend negative">
              <el-icon><CaretBottom /></el-icon>
              <span>-5%</span>
            </div>
          </div>
        </el-col>

        <el-col :xs="12" :sm="6" :md="6" :lg="6">
          <div class="today-card reports-today">
            <div class="today-header">
              <div class="today-icon">
                <el-icon><WarnTriangleFilled /></el-icon>
              </div>
              <div class="today-info">
                <span class="today-label">新增举报</span>
                <div class="today-number">{{ reportStats.todayReports || 0 }}</div>
              </div>
            </div>
            <div class="today-trend neutral">
              <span>今日新增</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 主要功能区域 -->
    <div class="main-section">
      <el-row :gutter="24">
        <!-- 快速操作 -->
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <div class="function-card quick-actions-card">
            <div class="card-header">
              <h3>
                <el-icon><Setting /></el-icon>
                快速操作
              </h3>
              <div class="card-subtitle">常用管理功能</div>
            </div>
            <div class="quick-actions">
              <div
                class="action-item reports-action"
                @click="$router.push('/admin/reports')"
                :class="{ disabled: reportStats.pendingReports === 0 }"
              >
                <div class="action-icon">
                  <el-icon><Flag /></el-icon>
                </div>
                <div class="action-info">
                  <div class="action-title">处理举报</div>
                  <div class="action-desc">{{ reportStats.pendingReports || 0 }} 条待处理</div>
                </div>
                <div class="action-arrow">
                  <el-icon><ArrowRight /></el-icon>
                </div>
              </div>

              <div class="action-item posts-action" @click="$router.push('/admin/posts')">
                <div class="action-icon">
                  <el-icon><Document /></el-icon>
                </div>
                <div class="action-info">
                  <div class="action-title">管理帖子</div>
                  <div class="action-desc">{{ stats.totalPosts }} 条帖子</div>
                </div>
                <div class="action-arrow">
                  <el-icon><ArrowRight /></el-icon>
                </div>
              </div>

              <div class="action-item users-action" @click="$router.push('/admin/users')">
                <div class="action-icon">
                  <el-icon><UserFilled /></el-icon>
                </div>
                <div class="action-info">
                  <div class="action-title">管理用户</div>
                  <div class="action-desc">{{ stats.totalUsers }} 个用户</div>
                </div>
                <div class="action-arrow">
                  <el-icon><ArrowRight /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 最新活动 -->
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <div class="function-card activity-card">
            <div class="card-header">
              <h3>
                <el-icon><Timer /></el-icon>
                最新活动
              </h3>
              <div class="card-subtitle">系统最新动态</div>
            </div>
            <div class="activity-list">
              <div class="activity-item">
                <div class="activity-avatar post-activity">
                  <el-icon><EditPen /></el-icon>
                </div>
                <div class="activity-content">
                  <div class="activity-title">新帖子发布</div>
                  <div class="activity-desc">用户 test123 发布了新帖子</div>
                  <div class="activity-time">2小时前</div>
                </div>
              </div>

              <div class="activity-item">
                <div class="activity-avatar user-activity">
                  <el-icon><UserFilled /></el-icon>
                </div>
                <div class="activity-content">
                  <div class="activity-title">新用户注册</div>
                  <div class="activity-desc">用户 test12345 完成注册</div>
                  <div class="activity-time">4小时前</div>
                </div>
              </div>

              <div class="activity-item">
                <div class="activity-avatar report-activity">
                  <el-icon><Flag /></el-icon>
                </div>
                <div class="activity-content">
                  <div class="activity-title">新举报提交</div>
                  <div class="activity-desc">举报垃圾信息内容</div>
                  <div class="activity-time">6小时前</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 系统状态 -->
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <div class="function-card status-card">
            <div class="card-header">
              <h3>
                <el-icon><TrendCharts /></el-icon>
                系统状态
              </h3>
              <div class="card-subtitle">系统运行状态监控</div>
            </div>
            <div class="status-list">
              <div class="status-item">
                <div class="status-indicator success"></div>
                <div class="status-content">
                  <div class="status-title">系统运行状态</div>
                  <div class="status-value">正常运行</div>
                </div>
              </div>

              <div class="status-item">
                <div class="status-indicator success"></div>
                <div class="status-content">
                  <div class="status-title">数据库连接</div>
                  <div class="status-value">连接正常</div>
                </div>
              </div>

              <div class="status-item">
                <div class="status-indicator info"></div>
                <div class="status-content">
                  <div class="status-title">在线用户</div>
                  <div class="status-value">{{ stats.activeUsers || 0 }} 人</div>
                </div>
              </div>

              <div class="status-item">
                <div class="status-indicator info"></div>
                <div class="status-content">
                  <div class="status-title">最后更新</div>
                  <div class="status-value">{{ formatTime(new Date()) }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 数据统计图表 -->
    <div class="chart-section">
      <div class="section-header">
        <h2 class="section-title">📈 数据分析</h2>
        <div class="section-description">详细数据统计与分析</div>
      </div>

      <el-row :gutter="24">
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <div class="chart-card growth-chart">
            <div class="card-header">
              <h3>
                <el-icon><TrendCharts /></el-icon>
                用户增长趋势
              </h3>
              <div class="card-subtitle">用户增长数据分析</div>
            </div>
            <div class="chart-content">
              <div class="chart-item">
                <div class="chart-label">本周新增用户</div>
                <div class="chart-bar">
                  <div class="chart-fill primary" :style="{ width: '80%' }"></div>
                  <span class="chart-value">{{ Math.floor(stats.totalUsers * 0.15) }}</span>
                </div>
              </div>

              <div class="chart-item">
                <div class="chart-label">本月新增用户</div>
                <div class="chart-bar">
                  <div class="chart-fill success" :style="{ width: '65%' }"></div>
                  <span class="chart-value">{{ Math.floor(stats.totalUsers * 0.35) }}</span>
                </div>
              </div>

              <div class="chart-item">
                <div class="chart-label">活跃用户比例</div>
                <div class="chart-bar">
                  <div class="chart-fill info" :style="{ width: '75%' }"></div>
                  <span class="chart-value"
                    >{{ Math.floor((stats.activeUsers / stats.totalUsers) * 100) }}%</span
                  >
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <div class="chart-card report-chart" v-if="reportStats.reasonTypeStats?.length > 0">
            <div class="card-header">
              <h3>
                <el-icon><Warning /></el-icon>
                举报原因分布
              </h3>
              <div class="card-subtitle">举报类型统计分析</div>
            </div>
            <div class="chart-content">
              <div
                v-for="[type, count] in reportStats.reasonTypeStats.slice(0, 4)"
                :key="type"
                class="chart-item"
              >
                <div class="chart-label">{{ getReasonTypeName(type) }}</div>
                <div class="chart-bar">
                  <div
                    class="chart-fill danger"
                    :style="{
                      width: `${
                        (count / Math.max(...reportStats.reasonTypeStats.map(s => s[1]))) * 100
                      }%`,
                    }"
                  ></div>
                  <span class="chart-value">{{ count }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="chart-card content-chart" v-else>
            <div class="card-header">
              <h3>
                <el-icon><DataAnalysis /></el-icon>
                内容统计
              </h3>
              <div class="card-subtitle">内容活跃度分析</div>
            </div>
            <div class="chart-content">
              <div class="chart-item">
                <div class="chart-label">帖子发布率</div>
                <div class="chart-bar">
                  <div class="chart-fill primary" :style="{ width: '85%' }"></div>
                  <span class="chart-value">85%</span>
                </div>
              </div>

              <div class="chart-item">
                <div class="chart-label">评论互动率</div>
                <div class="chart-bar">
                  <div class="chart-fill success" :style="{ width: '72%' }"></div>
                  <span class="chart-value">72%</span>
                </div>
              </div>

              <div class="chart-item">
                <div class="chart-label">悄悄话活跃度</div>
                <div class="chart-bar">
                  <div class="chart-fill info" :style="{ width: '68%' }"></div>
                  <span class="chart-value">68%</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import {
  UserFilled,
  Document,
  ChatDotRound,
  Flag,
  Refresh,
  EditPen,
  ChatLineRound,
  MessageBox,
  WarnTriangleFilled,
  TrendCharts,
  Timer,
  Setting,
  Warning,
  DataAnalysis,
  CaretTop,
  CaretBottom,
  ArrowRight,
} from "@element-plus/icons-vue";
import { getPendingReports } from "@/api/report";
import { getDashboardStats } from "@/api/admin";

// 响应式数据
const stats = ref({
  totalUsers: 0,
  activeUsers: 0,
  totalPosts: 0,
  publishedPosts: 0,
  totalComments: 0,
  totalWhispers: 0,
  totalFiles: 0,
  todayPosts: 0,
  todayComments: 0,
  todayWhispers: 0,
  todayFiles: 0,
});

const reportStats = ref({
  totalReports: 0,
  pendingReports: 0,
  todayReports: 0,
  reasonTypeStats: [] as Array<[number, number]>,
  targetTypeStats: [] as Array<[number, number]>,
  statusStats: [] as Array<[number, number]>,
});

const loading = ref(false);

// 加载统计数据
const loadStats = async () => {
  try {
    // 调用系统概览API
    const data = await getDashboardStats();

    // 设置统计数据
    const statsData = data as {
      totalUsers?: number;
      activeUsers?: number;
      totalPosts?: number;
      publishedPosts?: number;
      totalComments?: number;
      totalWhispers?: number;
      totalFiles?: number;
      todayPosts?: number;
      todayComments?: number;
      todayWhispers?: number;
      todayFiles?: number;
    };

    stats.value = {
      totalUsers: statsData?.totalUsers || 0,
      activeUsers: statsData?.activeUsers || 0,
      totalPosts: statsData?.totalPosts || 0,
      publishedPosts: statsData?.publishedPosts || statsData?.totalPosts || 0,
      totalComments: statsData?.totalComments || 0,
      totalWhispers: statsData?.totalWhispers || 0,
      totalFiles: statsData?.totalFiles || 0,
      todayPosts: statsData?.todayPosts || 0,
      todayComments: statsData?.todayComments || 0,
      todayWhispers: statsData?.todayWhispers || 0,
      todayFiles: statsData?.todayFiles || 0,
    };
  } catch (error) {
    console.error("Failed to load stats:", error);
    ElMessage.error("加载统计数据失败");
    // 使用默认数据作为备用
    stats.value = {
      totalUsers: 0,
      activeUsers: 0,
      totalPosts: 0,
      publishedPosts: 0,
      totalComments: 0,
      totalWhispers: 0,
      totalFiles: 0,
      todayPosts: 0,
      todayComments: 0,
      todayWhispers: 0,
      todayFiles: 0,
    };
  }
};

// 加载举报统计数据
const loadReportStats = async () => {
  try {
    // 使用pending reports API获取待处理举报数量
    const pendingResponse = await getPendingReports({ page: 1, size: 1 });
    const responseData = pendingResponse as { total?: number };

    reportStats.value = {
      totalReports: responseData.total || 0,
      pendingReports: responseData.total || 0,
      todayReports: 0, // 暂时设为0，后续可以添加API
      reasonTypeStats: [],
      targetTypeStats: [],
      statusStats: [],
    };
  } catch (error) {
    console.error("Failed to load report stats:", error);
    reportStats.value = {
      totalReports: 0,
      pendingReports: 0,
      todayReports: 0,
      reasonTypeStats: [],
      targetTypeStats: [],
      statusStats: [],
    };
  }
};

// 获取举报原因类型名称
const getReasonTypeName = (type: number): string => {
  const typeMap: Record<number, string> = {
    1: "垃圾信息",
    2: "违法违规",
    3: "涉黄涉暴",
    4: "恶意骚扰",
    5: "其他",
  };
  return typeMap[type] || "未知";
};

// 格式化时间
const formatTime = (time: Date): string => {
  return time.toLocaleString();
};

// 组件挂载
const loadDashboardData = async () => {
  loading.value = true;
  try {
    await Promise.all([loadStats(), loadReportStats()]);
    ElMessage.success("数据刷新成功");
  } catch (error) {
    console.error("Failed to load dashboard data:", error);
    ElMessage.error("加载仪表板数据失败");
  } finally {
    loading.value = false;
  }
};

const handleRefresh = () => {
  loadDashboardData();
};

// 自动刷新（每30秒）
const autoRefreshInterval = ref<number | null>(null);

const startAutoRefresh = () => {
  autoRefreshInterval.value = setInterval(() => {
    loadDashboardData();
  }, 30000); // 30秒刷新一次
};

const stopAutoRefresh = () => {
  if (autoRefreshInterval.value) {
    clearInterval(autoRefreshInterval.value);
    autoRefreshInterval.value = null;
  }
};

onMounted(() => {
  loadDashboardData();
  startAutoRefresh();
});

onUnmounted(() => {
  stopAutoRefresh();
});
</script>

<style scoped lang="scss">
.dashboard {
  padding: 0;
  background: #f5f7fa;
  min-height: 100vh;

  .page-header {
    margin-bottom: 24px;
    background-color: #f5f7fa;
    padding: 20px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;

      .header-left {
        .header-title {
          h1 {
            margin: 0 0 8px 0;
            font-size: 24px;
            color: #2c3e50;
          }

          p {
            margin: 0;
            color: #666;
          }
        }
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }
    }
  }

  .stats-section,
  .today-section,
  .main-section,
  .chart-section {
    max-width: 1200px;
    margin: 0 auto 32px;
    padding: 0 32px;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f2f5;

    .section-title {
      font-size: 20px;
      color: #2c3e50;
      font-weight: 600;
      position: relative;
      padding-left: 16px;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 2px;
      }
    }

    .section-description {
      font-size: 14px;
      color: #8c9db5;
      margin-top: 4px;
    }
  }

  .stats-row {
    .stat-card {
      background: white;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid #eef2f7;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        border-color: #667eea;
      }

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
      }

      .card-inner {
        position: relative;
        z-index: 1;
      }

      .card-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.05) 100%
        );
        border-radius: 16px;
        opacity: 0.5;
        z-index: 0;
      }

      .bg-pattern {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(
            circle at 10% 20%,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 50%
          ),
          radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        background-size: 50px 50px, 50px 50px;
        background-position: 0 0, 10px 10px;
        border-radius: 16px;
        opacity: 0.1;
      }

      .stat-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: white;
        margin-bottom: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

        &.users {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        &.posts {
          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        &.comments {
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        &.reports {
          background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
      }

      .stat-content {
        .stat-number {
          font-size: 32px;
          font-weight: 700;
          color: #2c3e50;
          margin-bottom: 8px;
          line-height: 1;
        }

        .stat-label {
          font-size: 14px;
          color: #8c9db5;
          font-weight: 500;
        }
      }

      .stat-trend {
        display: flex;
        align-items: center;
        margin-top: 12px;
        font-size: 12px;
        color: #52c41a;
        font-weight: 600;

        .trend-icon {
          font-size: 14px;
          margin-right: 4px;
          color: #52c41a;
        }

        &.alert {
          color: #ff4d4f;
          .trend-icon {
            color: #ff4d4f;
          }
        }
      }

      &.has-alert {
        .alert-indicator {
          position: absolute;
          top: 16px;
          right: 16px;
          z-index: 1;

          .alert-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ff4d4f;
            box-shadow: 0 0 8px rgba(255, 77, 79, 0.4);
          }
        }
      }
    }
  }

  .today-row {
    .today-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border: 1px solid #eef2f7;
      transition: all 0.3s ease;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
      }

      .today-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        .today-icon {
          width: 36px;
          height: 36px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: white;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          margin-right: 12px;
        }

        .today-info {
          .today-label {
            font-size: 14px;
            color: #8c9db5;
            font-weight: 500;
            margin-bottom: 4px;
          }

          .today-number {
            font-size: 28px;
            font-weight: 700;
            color: #2c3e50;
          }
        }
      }

      .today-trend {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 12px;
        margin-top: 12px;

        .el-icon {
          font-size: 12px;
          margin-right: 2px;
        }

        &.positive {
          color: #52c41a;
          background: rgba(82, 196, 26, 0.1);
        }

        &.negative {
          color: #ff4d4f;
          background: rgba(255, 77, 79, 0.1);
        }

        &.neutral {
          color: #faad14;
          background: rgba(250, 173, 20, 0.1);
        }
      }
    }
  }

  .function-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #eef2f7;
    transition: all 0.3s ease;
    height: 100%;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      border-color: #667eea;
    }

    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f0f2f5;

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          font-size: 18px;
          color: #667eea;
        }
      }

      .card-subtitle {
        font-size: 12px;
        color: #8c9db5;
        margin-top: 4px;
      }
    }

    .quick-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .action-item {
        display: flex;
        align-items: center;
        padding: 16px;
        border: 1px solid #f0f2f5;
        background: #fafbfc;
        border-radius: 12px;
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
          background: #667eea;
          border-color: #667eea;
          transform: translateX(4px);

          .action-icon {
            background: rgba(255, 255, 255, 0.2);
          }

          .action-info {
            .action-title,
            .action-desc {
              color: white;
            }
          }

          .action-arrow .el-icon {
            color: white;
          }
        }

        &.disabled {
          opacity: 0.5;
          cursor: not-allowed;
          pointer-events: none;
        }

        .action-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          color: white;
          background: #667eea;
          margin-right: 16px;
          transition: all 0.3s ease;
        }

        .action-info {
          flex: 1;

          .action-title {
            font-size: 14px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 4px;
            transition: color 0.3s ease;
          }

          .action-desc {
            font-size: 12px;
            color: #8c9db5;
            transition: color 0.3s ease;
          }
        }

        .action-arrow {
          .el-icon {
            font-size: 16px;
            color: #c0c4cc;
            transition: color 0.3s ease;
          }
        }
      }
    }

    .activity-list {
      .activity-item {
        display: flex;
        align-items: flex-start;
        padding: 16px 0;
        border-bottom: 1px solid #f0f2f5;

        &:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }

        .activity-avatar {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: white;
          margin-right: 16px;
          flex-shrink: 0;

          &.post-activity {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }

          &.user-activity {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }

          &.report-activity {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
          }
        }

        .activity-content {
          flex: 1;

          .activity-title {
            font-size: 14px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 4px;
          }

          .activity-desc {
            font-size: 12px;
            color: #8c9db5;
            margin-bottom: 6px;
            line-height: 1.4;
          }

          .activity-time {
            font-size: 11px;
            color: #c0c4cc;
          }
        }
      }
    }

    .status-list {
      .status-item {
        display: flex;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid #f0f2f5;

        &:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }

        .status-indicator {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          margin-right: 16px;
          flex-shrink: 0;

          &.success {
            background: #52c41a;
            box-shadow: 0 0 8px rgba(82, 196, 26, 0.4);
          }

          &.info {
            background: #1890ff;
            box-shadow: 0 0 8px rgba(24, 144, 255, 0.4);
          }

          &.warning {
            background: #faad14;
            box-shadow: 0 0 8px rgba(250, 173, 20, 0.4);
          }

          &.error {
            background: #ff4d4f;
            box-shadow: 0 0 8px rgba(255, 77, 79, 0.4);
          }
        }

        .status-content {
          flex: 1;

          .status-title {
            font-size: 14px;
            color: #2c3e50;
            font-weight: 500;
            margin-bottom: 4px;
          }

          .status-value {
            font-size: 13px;
            color: #52c41a;
            font-weight: 600;
          }
        }
      }
    }
  }

  .chart-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #eef2f7;
    transition: all 0.3s ease;
    height: 100%;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      border-color: #667eea;
    }

    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f0f2f5;

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          font-size: 18px;
          color: #667eea;
        }
      }

      .card-subtitle {
        font-size: 12px;
        color: #8c9db5;
        margin-top: 4px;
      }
    }

    .chart-content {
      .chart-item {
        margin-bottom: 24px;

        &:last-child {
          margin-bottom: 0;
        }

        .chart-label {
          font-size: 14px;
          color: #8c9db5;
          margin-bottom: 12px;
          font-weight: 500;
        }

        .chart-bar {
          position: relative;
          height: 32px;
          background: #f5f7fa;
          border-radius: 16px;
          overflow: hidden;
          border: 1px solid #eef2f7;

          .chart-fill {
            height: 100%;
            border-radius: 16px;
            transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;

            &.primary {
              background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            }

            &.success {
              background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
            }

            &.info {
              background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%);
            }

            &.warning {
              background: linear-gradient(90deg, #faad14 0%, #ffc53d 100%);
            }

            &.danger {
              background: linear-gradient(90deg, #ff4d4f 0%, #ff7875 100%);
            }

            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.3) 50%,
                transparent 100%
              );
              animation: chartShine 2s infinite;
            }
          }

          .chart-value {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 13px;
            color: #2c3e50;
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
            z-index: 2;
          }
        }
      }
    }
  }

  @keyframes chartShine {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .page-header {
      padding: 20px;
      margin-bottom: 20px;

      .header-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;

        .header-title h1 {
          font-size: 24px;
        }
      }
    }

    .stats-section,
    .today-section,
    .main-section,
    .chart-section {
      padding: 0 20px;
      margin-bottom: 20px;
    }

    .function-card {
      padding: 20px;
      margin-bottom: 20px;
    }
  }
}

// 覆盖Element Plus默认样式
:deep(.el-col) {
  margin-bottom: 20px;

  @media (max-width: 768px) {
    margin-bottom: 16px;
  }
}

:deep(.el-button) {
  font-weight: 500;
}
</style>
